<template>
	<div style="">
		<PPT :slide='slide' :size='120'></PPT>
	</div>
</template>

<script lang="ts">
	import {
		computed,
		PropType,
		defineComponent,
		provide,
		ref
	} from 'vue-demi'
	import PPT from '@/views/components/ThumbnailSlide/index.vue'
	export default defineComponent({
		name: 'index',
		components: {
			PPT,
		},
		setup(props) {
			const slide = ref(Array);
			slide.value = {
				"id": "AZ66mqQn",
				"elements": [{
					"type": "text",
					"id": "0iqVUD",
					"left": 87.30772981628738,
					"top": 301.31603128419374,
					"width": 327.87745536889776,
					"height": 63.1875,
					"lineHeight": 1.2,
					"content": `<p style="
					text-align: center;
					"><strong><span style="
					color: rgba(102, 102, 102, 1);
					"><span style="
					font-size: 36px">在此处添加标题</span></span></strong></p>`,
					"rotate": 0,
					"defaultFontName": "Microsoft Yahei",
					"defaultColor": "#333",
					"wordSpace": 6
				}, {
					"type": "text",
					"id": "ow1MiY",
					"left": 454.65077868048013,
					"top": 129.22918531781556,
					"width": 90.69844263903978,
					"height": 344,
					"content": `<p style="
					"><strong><span style="
					color: rgba(45, 112, 255, 1);
					"><span style="
					font-size: 54px\">05a'a211</span></span></strong></p>`,
					"rotate": 0,
					"defaultFontName": "Microsoft Yahei",
					"defaultColor": "rgba(0,0,0,1)"
				}, {
					"type": "image",
					"id": "goWz44",
					"src": "https://fynotefile.oss-cn-zhangjiakou.aliyuncs.com/fynote/fyfile/392/1/e19f63be4d8a45a3b2f2a531b589cf1b.png",
					"width": 1000,
					"height": 180.20833333333334,
					"left": 0,
					"top": 381.87861154065274,
					"fixedRatio": true,
					"rotate": 0
				}, {
					"type": "line",
					"id": "0_hHSr",
					"left": 450.80166029136484,
					"top": 222.5618099306717,
					"start": [0, 0],
					"end": [98.39667941727032, 0],
					"points": ["", ""],
					"color": "rgba(45,112,255,1)",
					"style": "solid",
					"width": 4
				}, {
					"type": "text",
					"id": "IcHBrx",
					"left": 6.666666666666657,
					"top": 186.87158683974928,
					"width": 105.18518518518518,
					"height": 50,
					"content": `<p style="
					">1</p>`,
					"rotate": 0,
					"defaultFontName": "Microsoft Yahei",
					"defaultColor": "#333"
				}, {
					"type": "image",
					"id": "5at_0g",
					"src": "https://fynotefile.oss-cn-zhangjiakou.aliyuncs.com/fynote/fyfile/418/1/b9f7934a0bba45c384e6dbe3295911c3.png",
					"width": 184,
					"height": 100,
					"left": 36.296296296296276,
					"top": 21.62037037037039,
					"fixedRatio": true,
					"rotate": 0
				}, {
					"type": "shape",
					"id": "2iA8UI",
					"left": 300,
					"top": 40.879629629629626,
					"width": 50.37037037037038,
					"height": 41.481481481481495,
					"viewBox": 200,
					"path": "M 0 0 L 200 0 L 200 200 L 0 200 Z",
					"fill": "#5b9bd5",
					"fixedRatio": false,
					"rotate": 0
				}, {
					"type": "shape",
					"id": "RT_VAe",
					"left": 403.7037037037037,
					"top": 54.9537037037037,
					"width": 22.962962962962962,
					"height": 26.666666666666664,
					"viewBox": 200,
					"path": "M 0 0 L 200 0 Q 200 200 0 200 L 0 0 Z",
					"fill": "#5b9bd5",
					"fixedRatio": false,
					"rotate": 0
				}, {
					"type": "shape",
					"id": "_hqFjb",
					"left": 451.85185185185185,
					"top": 26.805555555555554,
					"width": 25.185185185185183,
					"height": 22.22222222222222,
					"viewBox": 200,
					"path": "M 200 0 L 100 0 L 0 100 L 0 200 L 200 0 Z",
					"fill": "#5b9bd5",
					"fixedRatio": false,
					"rotate": 0
				}, {
					"type": "shape",
					"id": "o0Ifzq",
					"left": 485.5767046064061,
					"top": 8.287037037037035,
					"width": 148.14814814814815,
					"height": 148.14814814814815,
					"viewBox": 200,
					"path": "M 0 100 L 60 0 L 60 60 L 140 60 L 140 0 L 200 100 L 140 200 L 140 140 L 60 140 L 60 200 L 0 100 Z",
					"fill": "#5b9bd5",
					"fixedRatio": false,
					"rotate": 0
				}, {
					"type": "line",
					"id": "iKI3SY",
					"left": 694.8148148148148,
					"top": 40.879629629629626,
					"start": [0, 0],
					"end": [58.51851851851851, 113.33333333333333],
					"points": ["", ""],
					"color": "#5b9bd5",
					"style": "dashed",
					"width": 2
				}, {
					"type": "line",
					"id": "U8YHiu",
					"left": 741.4814814814814,
					"top": 82.36111111111111,
					"start": [129.62962962962968, 0],
					"end": [0, 179.2592592592592],
					"points": ["", "arrow"],
					"color": "#5b9bd5",
					"style": "solid",
					"width": 2,
					"curve": [303.33333333333337, 101.48148148148147]
				}, {
					"type": "table",
					"id": "pSlEqy",
					"width": 200,
					"height": 110,
					"colWidths": [0.5, 0.5],
					"rotate": 0,
					"data": [
						[{
							"id": "Ib5YbA",
							"colspan": 1,
							"rowspan": 1,
							"text": "",
							"style": {
								"fontname": "Microsoft Yahei",
								"color": "#333"
							}
						}, {
							"id": "532jKK",
							"colspan": 1,
							"rowspan": 1,
							"text": "",
							"style": {
								"fontname": "Microsoft Yahei",
								"color": "#333"
							}
						}],
						[{
							"id": "boZ0S2",
							"colspan": 1,
							"rowspan": 1,
							"text": "",
							"style": {
								"fontname": "Microsoft Yahei",
								"color": "#333"
							}
						}, {
							"id": "1woLtV",
							"colspan": 1,
							"rowspan": 1,
							"text": "",
							"style": {
								"fontname": "Microsoft Yahei",
								"color": "#333"
							}
						}],
						[{
							"id": "BySlJz",
							"colspan": 1,
							"rowspan": 1,
							"text": "",
							"style": {
								"fontname": "Microsoft Yahei",
								"color": "#333"
							}
						}, {
							"id": "F5rP_m",
							"colspan": 1,
							"rowspan": 1,
							"text": "",
							"style": {
								"fontname": "Microsoft Yahei",
								"color": "#333"
							}
						}]
					],
					"left": 111.85185185185183,
					"top": 147.99074074074076,
					"outline": {
						"width": 2,
						"style": "solid",
						"color": "#eeece1"
					},
					"theme": {
						"color": "#5b9bd5",
						"rowHeader": true,
						"rowFooter": false,
						"colHeader": false,
						"colFooter": false
					}
				}, {
					"type": "latex",
					"id": "ryCTMh",
					"width": 105,
					"height": 80,
					"rotate": 0,
					"left": 454.65077868048013,
					"top": 241.24999999999997,
					"path": "M37 45L35 45L33 44L31 42L28 38L27 37L25 36L23 36L21 37L20 39L20 41L21 43L23 44L25 44L27 43L28 42L31 38L33 36L35 35L37 35M49.25 16L64.25 37L47.75 64M47.75 16L62.75 37M46.25 16L62.75 38.5M46.25 16L80.75 16L83.75 26.5L79.25 16M49.25 62.5L80.75 62.5M47.75 64L80.75 64L83.75 53.5L79.25 64",
					"latex": "\\\\propto\\\\sum",
					"color": "#333",
					"strokeWidth": 2,
					"viewBox": [105, 80],
					"fixedRatio": true
				}, {
					"type": "chart",
					"id": "WmgvoR",
					"chartType": "line",
					"left": 545.3492213195199,
					"top": 301.31603128419374,
					"width": 386.502630532332,
					"height": 200,
					"rotate": 0,
					"themeColor": ["#5b9bd5"],
					"gridColor": "#333",
					"data": {
						"labels": ["类别1", "类别2", "类别3", "类别4", "类别5"],
						"legends": ["系列1"],
						"series": [
							[12, 19, 5, 2, 18]
						]
					}
				}, {
					"type": "video",
					"id": "iQMymU",
					"width": 658.8888888888889,
					"height": 250,
					"rotate": 0,
					"left": 75.18518518518525,
					"top": 276.80555555555554,
					"src": "https://msb-edu-im-prod.oss-cn-beijing.aliyuncs.com/im_attachment/user_00023220/3.68.mp4"
				}, {
					"type": "audio",
					"id": "p9GwiK",
					"width": 50,
					"height": 50,
					"rotate": 0,
					"left": 743.8888888888889,
					"top": 32.361111111111114,
					"loop": false,
					"autoplay": false,
					"fixedRatio": true,
					"color": "#5b9bd5",
					"src": "https://msb-edu-im-prod.oss-cn-beijing.aliyuncs.com/voice/7c427cd725f946418f9ca905a6cecfb7.mp3"
				}],
				"background": {
					"type": "solid",
					"color": "#fff"
				}
			}


			return {
				slide
			}
		},
	})
</script>

<style lang="scss" scoped>
	.thumbnail-slide {
		background-color: #fff;
		overflow: hidden;
	}

	.elements {
		transform-origin: 0 0;
	}

	.background {
		width: 100%;
		height: 100%;
		background-position: center;
		position: absolute;
	}

	.placeholder {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>
